<template>
  <div class="box_1 flex-col">
    <div class="image-wrapper_62 flex-row">
      <img
        class="image_13"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNGd6f8d6f09c0f83caf7bfd690697cb2fa.png"
        :style="{ opacity: ftObj.ft1 }"
        @click="ftObj.ft1 = (ftObj.ft1 + 1) % 2" />
      <img
        class="section_5"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNGa07f3d1e6aede6f9590b813bfec0427e.png"
        :style="{ opacity: ftObj.ft2 }"
        @click="ftObj.ft2 = (ftObj.ft2 + 1) % 2" />
      <img
        class="label_3"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNG9f65cdb5bc980271b6f2611941f8d311.png"
        :style="{ opacity: ftObj.ft3 }"
        @click="ftObj.ft3 = (ftObj.ft3 + 1) % 2" />
      <img
        class="image_14"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNG8bf2a8bc58d74ab5a870f9df5b5a7361.png"
        :style="{ opacity: ftObj.ft4 }"
        @click="ftObj.ft4 = (ftObj.ft4 + 1) % 2" />
      <img
        class="label_4"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNGc3ab1ff84e34931c0e0569107b14df90.png"
        :style="{ opacity: ftObj.ft5 }"
        @click="ftObj.ft5 = (ftObj.ft5 + 1) % 2" />
      <img
        class="label_5"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNGc209a4ac24962ecaf93cf2e23659174c.png"
        :style="{ opacity: ftObj.ft6 }"
        @click="ftObj.ft6 = (ftObj.ft6 + 1) % 2" />
      <img
        class="image_21"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNG5bb550c0605e4c4bab1efbf53a48aa37.png"
        :style="{ opacity: ftObj.ft7 }"
        @click="ftObj.ft7 = (ftObj.ft7 + 1) % 2" />
      <img
        class="label_6"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNG198eafce148df8ad7f24ae11cffe3fc5.png"
        :style="{ opacity: ftObj.ft8 }"
        @click="ftObj.ft8 = (ftObj.ft8 + 1) % 2" />
    </div>
    <div class="image-wrapper_63 flex-row">
      <img
        class="image_9"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNGcef1c974b52ab5e0996ea32eca9aa91b.png"
        :style="{ opacity: ftObj.ft9 }"
        @click="ftObj.ft9 = (ftObj.ft9 + 1) % 2" />
      <img
        class="image-wrapper_2"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNG0d561e65437d192e2f529b20b9b6524e.png"
        :style="{ opacity: ftObj.ft10 }"
        @click="ftObj.ft10 = (ftObj.ft10 + 1) % 2" />
      <img
        class="image_4"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNG30059d34c334032f2ce22030a1ca92c3.png"
        :style="{ opacity: ftObj.ft11 }"
        @click="ftObj.ft11 = (ftObj.ft11 + 1) % 2" />
      <img
        class="image-wrapper_1"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNG9f29cec183a8e849b267de44029b671b.png"
        :style="{ opacity: ftObj.ft12 }"
        @click="ftObj.ft12 = (ftObj.ft12 + 1) % 2" />
      <img
        class="image_8"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNG83fc4f72e41ec7b32899ab111cef04cb.png"
        :style="{ opacity: ftObj.ft13 }"
        @click="ftObj.ft13 = (ftObj.ft13 + 1) % 2" />
    </div>
    <div class="box_28 flex-row justify-end">
      <div class="group_51 flex-col justify-between">
        <div class="group_52 flex-row justify-between">
          <div class="image-wrapper_64 flex-col justify-between">
            <img
              class="image_3"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG1c2a6afa2946dc2bbedc4bdc5836b824.png"
              :style="{ opacity: ftObj.ft14 }"
              @click="ftObj.ft14 = (ftObj.ft14 + 1) % 2" />
            <img
              class="image_22"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG976675beee712f90038dda9a96185792.png"
              :style="{ opacity: ftObj.ft15 }"
              @click="ftObj.ft15 = (ftObj.ft15 + 1) % 2" />
          </div>
          <div class="image-wrapper_65 flex-col justify-between">
            <img
              class="image_2"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNG47895a44bd3954b13db17b8a31fad29b.png"
              :style="{ opacity: ftObj.ft16 }"
              @click="ftObj.ft16 = (ftObj.ft16 + 1) % 2" />
            <img
              class="image_20"
              referrerpolicy="no-referrer"
              src="@/assets/faceimg/FigmaDDSSlicePNGa22530eed676d65c65e456619d2498d8.png"
              :style="{ opacity: ftObj.ft17 }"
              @click="ftObj.ft17 = (ftObj.ft17 + 1) % 2" />
          </div>
          <img
            class="image_11"
            referrerpolicy="no-referrer"
            src="@/assets/faceimg/FigmaDDSSlicePNGb0742d814616c8d4fc6590b94d5aaab2.png"
            :style="{ opacity: ftObj.ft18 }"
            @click="ftObj.ft18 = (ftObj.ft18 + 1) % 2" />
        </div>
        <div class="image-wrapper_66 flex-row">
          <img
            class="image_23"
            referrerpolicy="no-referrer"
            src="@/assets/faceimg/FigmaDDSSlicePNG520b0f967e6576b83382214e81632501.png"
            :style="{ opacity: ftObj.ft19 }"
            @click="ftObj.ft19 = (ftObj.ft19 + 1) % 2" />
          <img
            class="label_1"
            referrerpolicy="no-referrer"
            src="@/assets/faceimg/FigmaDDSSlicePNGc9bbe330220a639366967a7d755ed9ed.png"
            :style="{ opacity: ftObj.ft20 }"
            @click="ftObj.ft20 = (ftObj.ft20 + 1) % 2" />
          <img
            class="label_2"
            referrerpolicy="no-referrer"
            src="@/assets/faceimg/FigmaDDSSlicePNGf40b15e2e83dfb84507f52c8c7b1c706.png"
            :style="{ opacity: ftObj.ft21 }"
            @click="ftObj.ft21 = (ftObj.ft21 + 1) % 2" />
          <img
            class="image-wrapper_11"
            referrerpolicy="no-referrer"
            src="@/assets/faceimg/FigmaDDSSlicePNG6b425ce7f90f9a12f838832e5b816284.png"
            :style="{ opacity: ftObj.ft22 }"
            @click="ftObj.ft22 = (ftObj.ft22 + 1) % 2" />
        </div>
      </div>
      <img
        class="image_12"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNG4ce61aea64d65b308bc05b82243b2d0b.png"
        :style="{ opacity: ftObj.ft23 }"
        @click="ftObj.ft23 = (ftObj.ft23 + 1) % 2" />
      <img
        class="image_10"
        referrerpolicy="no-referrer"
        src="@/assets/faceimg/FigmaDDSSlicePNG98634cb8bc60f44e69e700bb8183d01b.png"
        :style="{ opacity: ftObj.ft24 }"
        @click="ftObj.ft24 = (ftObj.ft24 + 1) % 2" />
    </div>
    <img
      class="image_1"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNGbcffb1ad790f8abb72bf3bf57439ea48.png"
      :style="{ opacity: ftObj.ft25 }"
      @click="ftObj.ft25 = (ftObj.ft25 + 1) % 2" />
    <img
      class="image_7"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG25cb09a07403b2cdce6bdf8aef5c821b.png"
      :style="{ opacity: ftObj.ft26 }"
      @click="ftObj.ft26 = (ftObj.ft26 + 1) % 2" />
    <img
      class="image_15"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG37daf858d243c7d010b305428f648951.png"
      :style="{ opacity: ftObj.ft27 }"
      @click="ftObj.ft27 = (ftObj.ft27 + 1) % 2" />
    <img
      class="image_16"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG90e04d2a6cb7ac8c2b52a1e188c4c436.png"
      :style="{ opacity: ftObj.ft28 }"
      @click="ftObj.ft28 = (ftObj.ft28 + 1) % 2" />
    <img
      class="image-wrapper_10"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNGbdcb42bc7b607729aadd1ffc7cdbbf57.png"
      :style="{ opacity: ftObj.ft29 }"
      @click="ftObj.ft29 = (ftObj.ft29 + 1) % 2" />
    <img
      class="image_17"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG7d40fddf1b6f788538b6e6009ee8803e.png"
      :style="{ opacity: ftObj.ft30 }"
      @click="ftObj.ft30 = (ftObj.ft30 + 1) % 2" />
    <img
      class="image_24"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNGc2d1fa355dcadd1e068250f13393df10.png"
      :style="{ opacity: ftObj.ft31 }"
      @click="ftObj.ft31 = (ftObj.ft31 + 1) % 2" />
    <img
      class="image_25"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG74d90986a46b23e67357208b63a5dbed.png"
      :style="{ opacity: ftObj.ft32 }"
      @click="ftObj.ft32 = (ftObj.ft32 + 1) % 2" />
    <img
      class="image_26"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNGf94efa1465e929962901a87ad2968166.png"
      :style="{ opacity: ftObj.ft33 }"
      @click="ftObj.ft33 = (ftObj.ft33 + 1) % 2" />
    <img
      class="image_27"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNGd511759099114528cfa5d8fbc689db6d.png"
      :style="{ opacity: ftObj.ft34 }"
      @click="ftObj.ft34 = (ftObj.ft34 + 1) % 2" />
    <img
      class="image_28"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNGf1da8868b6d9075bcd5a53edb973604c.png"
      :style="{ opacity: ftObj.ft35 }"
      @click="ftObj.ft35 = (ftObj.ft35 + 1) % 2" />
    <img
      class="image_29"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG8f1035076325a4b070547f6fd5b1d697.png"
      :style="{ opacity: ftObj.ft36 }"
      @click="ftObj.ft36 = (ftObj.ft36 + 1) % 2" />
    <img
      class="image_30"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNGc83d88a0cf10c7078caf18bda6340b2b.png"
      :style="{ opacity: ftObj.ft37 }"
      @click="ftObj.ft37 = (ftObj.ft37 + 1) % 2" />
    <img
      class="image_5"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG9ecd2ed5204b3a427da444e7ed2e97e1.png"
      :style="{ opacity: ftObj.ft38 }"
      @click="ftObj.ft38 = (ftObj.ft38 + 1) % 2" />
    <img
      class="image_31"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNGac8f22b54e5a6b5aa398ed3af7667dbd.png"
      :style="{ opacity: ftObj.ft39 }"
      @click="ftObj.ft39 = (ftObj.ft39 + 1) % 2" />
    <img
      class="image_32"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG8d3283ec09c3852ec10320e2135d6b62.png"
      :style="{ opacity: ftObj.ft40 }"
      @click="ftObj.ft40 = (ftObj.ft40 + 1) % 2" />
    <img
      class="image_33"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNGd54c948376162c51788edeb83b778f44.png"
      :style="{ opacity: ftObj.ft41 }"
      @click="ftObj.ft41 = (ftObj.ft41 + 1) % 2" />
    <img
      class="label_7"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG49b7ff9402410ae1f759b0c796a88e0c.png"
      :style="{ opacity: ftObj.ft42 }"
      @click="ftObj.ft42 = (ftObj.ft42 + 1) % 2" />
    <img
      class="image-wrapper_5"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG457cbf0ded796148cf052f500d1025c2.png"
      :style="{ opacity: ftObj.ft43 }"
      @click="ftObj.ft43 = (ftObj.ft43 + 1) % 2" />
    <img
      class="image-wrapper_3"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG18260904efe57d79c86db7d0d6c80360.png"
      :style="{ opacity: ftObj.ft44 }"
      @click="ftObj.ft44 = (ftObj.ft44 + 1) % 2" />
    <img
      class="image-wrapper_23"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNGa25009aec592577d9b32c04b0f70e9a0.png"
      :style="{ opacity: ftObj.ft45 }"
      @click="ftObj.ft45 = (ftObj.ft45 + 1) % 2" />
    <img
      class="image-wrapper_4"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG2001cba437ca8186e51e475ed88a7c3f.png"
      :style="{ opacity: ftObj.ft46 }"
      @click="ftObj.ft46 = (ftObj.ft46 + 1) % 2" />
    <img
      class="image_34"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG1f93677cb6129395a70a015f2f78aef3.png"
      :style="{ opacity: ftObj.ft47 }"
      @click="ftObj.ft47 = (ftObj.ft47 + 1) % 2" />
    <img
      class="image_19"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG7704adbb371555e095651f41e4cad7f5.png"
      :style="{ opacity: ftObj.ft48 }"
      @click="ftObj.ft48 = (ftObj.ft48 + 1) % 2" />
    <img
      class="image_18"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG16ade9f43e38fc5489ade1c2112edd2f.png"
      :style="{ opacity: ftObj.ft49 }"
      @click="ftObj.ft49 = (ftObj.ft49 + 1) % 2" />
    <img
      class="image_35"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG63553e8024ff36303d19864c244854ba.png"
      :style="{ opacity: ftObj.ft50 }"
      @click="ftObj.ft50 = (ftObj.ft50 + 1) % 2" />
    <img
      class="image_36"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG8cb4150b2b56afdc8841e624a618d460.png"
      :style="{ opacity: ftObj.ft51 }"
      @click="ftObj.ft51 = (ftObj.ft51 + 1) % 2" />
    <img
      class="image_37"
      referrerpolicy="no-referrer"
      src="@/assets/faceimg/FigmaDDSSlicePNG417874cae7d40a51e00c526732e4565e.png"
      :style="{ opacity: ftObj.ft52 }"
      @click="ftObj.ft52 = (ftObj.ft52 + 1) % 2" />
  </div>
</template>

<script>
import '@/assets/css/face.css';
import '@/assets/css/facecom.css';

export default {
  name: 'ClerkFacial', // 咨询面部
  data() {
    return {
      ftObj /* 控制面部区域显示 */: {
        ft1: 0,
        ft2: 0,
        ft3: 0,
        ft4: 0,
        ft5: 0,
        ft6: 0,
        ft7: 0,
        ft8: 0,
        ft9: 0,
        ft10: 0,
        ft11: 0,
        ft12: 0,
        ft13: 0,
        ft14: 0,
        ft15: 0,
        ft16: 0,
        ft17: 0,
        ft18: 0,
        ft19: 0,
        ft20: 0,
        ft21: 0,
        ft22: 0,
        ft23: 0,
        ft24: 0,
        ft25: 0,
        ft26: 0,
        ft27: 0,
        ft28: 0,
        ft29: 0,
        ft30: 0,
        ft31: 0,
        ft32: 0,
        ft33: 0,
        ft34: 0,
        ft35: 0,
        ft36: 0,
        ft37: 0,
        ft38: 0,
        ft39: 0,
        ft40: 0,
        ft41: 0,
        ft42: 0,
        ft43: 0,
        ft44: 0,
        ft45: 0,
        ft46: 0,
        ft47: 0,
        ft48: 0,
        ft49: 0,
        ft50: 0,
        ft51: 0,
        ft52: 0,
      },
    };
  },
  methods: {
    /**
     * 指定人脸模型的显示区域
     * @param {string} trust 时间线表的 trust 字段 (record.trust), 例如: ',11,38,39,44,47,52,'
     */
    showFacialModel: async function (trust) {
      if (trust && trust.length > 0) {
        const faceIds = trust
          .split(',')
          .map(x => x.trim())
          .filter(x => x.length > 0);
        for (let i = 1; i < 53; i++) {
          if (faceIds.includes('' + i)) {
            this.ftObj['ft' + i] = 1;
          } else {
            this.ftObj['ft' + i] = 0;
          }
        }
      } else {
        for (let i = 1; i < 53; i++) {
          this.ftObj['ft' + i] = 0;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
